<style>
.fix-grid {
  min-width: 150px;
}
</style>

<template>
  <view class="d-flex f-wrap gap-2 pa-3">
    <view
      class="flex-1 bg-cell lh-1 fix-grid bdrs-5 ov-h"
      v-for="it in goodsList"
      :key="it.id"
      @click="onRow(it)"
    >
      <q-img :src="it.cover" w="100%" h="140px" />
      <view class="pa-1">
        <view class="u-line-1 op-8 fz-15 mt-1">{{ it.name }}</view>
        <view class="al-c mt-2">
          <view class="red-1 fw-b">
            <span class="fz-12">￥</span>
            <span class="fz-17">{{ it.price }}</span>
          </view>
          <view class="ml-auto">
            <q-num-box
              :value="it.num"
              @change="setCartNum(it, $event)"
            ></q-num-box>
          </view>
        </view>
      </view>
    </view>
    <view class="fix-grid flex-1" v-if="goodsList.length % 2 == 1"></view>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    rows: Array,
  },
  computed: {
    ...mapState(["cartList"]),
    goodsList() {
      return this.rows.map((it) => {
        const row = this.cartList.find((item) => item.id == it.id);
        return {
          ...it,
          num: row?.num || 0,
        };
      });
    },
  },
  data() {
    return {};
  },
  methods: {
    onRow(it) {
      this.$navTo("goods", {
        id: it.id,
      });
    },
    setCartNum(info, num) {
      this.$store.dispatch("addCart", {
        info,
        num,
      });
    },
  },
};
</script>
